Ext.define('Qms.view.destination.DestinationViewport', {
    extend: 'Ext.panel.Panel',
    padding: '',
    layout: {
        type: 'border'
    },
    flex: 1,
    
    isRefreshed: function(){
        return this.enableToggle;
    },
    
    setRefreshed: function(refresh){
        Ext.getCmp('refreshButton').enableToggle = refresh;
    },
    
    hideDestinationList: function(){
        Ext.getCmp('destinationId').hidden = true;  
    },

    updateTokenStatus: function(grid, tokenStatus){
            
            var arraySelected =grid.getSelectionModel().getSelection();
            var record = arraySelected[0];
            var tokenId = record.get('tokenId');
            var currentTokenStatus = record.get('tokenStatus');
            
            if(currentTokenStatus == '0' && tokenStatus == '2'){
                Ext.Msg.alert('Message', 'Token Id: '+tokenId+' can\'t be <b>DONE</b>. Because it is not yet <b>CALLED</b>. ');
            }
            else{
                Ext.Ajax.request({
                    method: 'POST',
                    url: 'token/updateToken?tokenId='+tokenId+'&tokenStatus='+tokenStatus,
                    waitMsg: 'Processing...',
                    success: function(result, request){
                        //Ext.Msg.alert('Success','Success!!!');
                        if(Ext.getCmp('destinationScreenTokenGrid') != null){
                            
                            store = Ext.getCmp('destinationScreenTokenGrid').store;
                            store.load({
                                params: {
                                     destinationId: Ext.getCmp('destinationId').value
                                },
                                callback: function(r, options, success){
                                        if(success == true){
                                            if (r.status == true){     
                                                    mask.hide();
                                            }
                                        }
                                    }
                            });
                        }
                    },
                    failure: function(){
                        Ext.Msg.alert('Error','Error?');
                    }
                })
            }
    },

    initComponent: function() {
        var me = this;
        var destinationTokenStore = Ext.create("Qms.data.store.DestinationTokenStore");
        //tokenStore.proxy.url='destination/tokenListByDestination';
        //var destinationStore = Ext.create("Qms.data.store.DestinationStore"); 
        
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    //title: 'OPGEA Queing Management System',
                    region: 'center',
                    layout: 'border',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            padding: '5,0,0,5',
                            dock: 'top',
                            items: [
                                '-',
                                {
                                    xtype: 'button',
                                    text: '<font size="4">Call</font>',
                                    height: 50,
                                    width: 100,
                                    handler: function(){
                                        var grid = me.down('gridpanel');
                                        me.updateTokenStatus(grid, '1');
                                       
                                    }
                                },
                                '-',
                                {
                                    xtype: 'tbfill'
                                },
                                '-',
                                {
                                    xtype: 'button',
                                    text: '<font size="4">Done</font>',
                                    height: 50,
                                    width: 100,
                                    handler: function(){
                                        var grid = me.down('gridpanel');
                                        me.updateTokenStatus(grid, '2');
                                    }
                                },
                                {
                                    xtype: 'combo',
                                    //fieldLabel: '<font size="4">Destination</font>',
                                    labelAlign: 'right',
                                    //hiddenName: 'destinationId',
                                    id: 'destinationId',
                                    name: 'destinationId',
                                    store: new Ext.create("Qms.data.store.DestinationStore"),
                                    displayField: 'name',
                                    valueField: 'id',
                                    triggerAction: 'all',
                                    editable: false,
                                    allowBlank: false,
                                    msgTarget: 'under',
                                    blankText: 'Must select the Destination',
                                    listeners: {
                                        select: function(){
                                            Ext.getStore('destinationTokenStore').load({
                                                params:{
                                                    destinationId: this.value
                                                }
                                            });
                                        }
                                    }

                                }
                                
                            ]
                        }
                    ],
                    items: [
                        {
                            xtype: 'gridpanel',
                            id: 'destinationScreenTokenGrid',
                            title: '',
                            scroll:'both',
                            region: 'center',
                            columnLines: true,
                            autoHeight: true,
                            store: destinationTokenStore,
                            viewConfig:{
                                    stripeRows: false,
                                    forceFit: true,
                                    getRowClass: function(record, rowIndex, rowParams, store){
                                            var cssClass = "A"+record.get('tokenStatus');
                                            return cssClass;
                                    }
                            },
                            columns: [
                                {
                                    xtype: 'templatecolumn',
                                    dataIndex: 'tokenNo',
                                    tpl: '<font size="6"><b>{tokenNo}</b></font>',
                                    text: 'Token No.',
                                    width: 100
                                },
                                {
                                    xtype: 'templatecolumn',
                                    dataIndex: 'personName',
                                    tpl: '<font size="4"><b>{personName}</b></font>'+
                                         '<br/>',
                                    text: 'Name',
                                    width: 340
                                },
                                {
                                    dataIndex: 'destinationName',
                                    text: 'Destination',
                                    hidden: true
                                },
                                {
                                    dataIndex: 'tokenStatus',
                                    hidden: true
                                }
                            ],
                            bbar: Ext.create('Ext.PagingToolbar', {
                            store: destinationTokenStore,
                            displayInfo: true,
                            displayMsg: 'Displaying topics {0} - {1} of {2}',
                            emptyMsg: "No topics to display",
                            items:[
                                    '-', 
                                    {
                                    xtype: 'button',
                                    id: 'refreshButton',
                                    text: 'Auto Refresh',
                                    enableToggle: true,
                                    iconCls: 'tableRefreshIcon',
                                    handler: function(){
                                            Ext.Msg.alert("Message", 'Autorefreshing has gone enhanced.\n So the action of this button is no more required.');
                                        }
                                    }
                                ]
                            })
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});